<template>
  <div class="box">
    <div class="box1">
      <h1>UNI-ADMIN</h1>
      <el-form id="q1" :model="userinfo" class="demo-form-inline">
        <el-form-item label="用户名:">
          <el-input
            v-model="userinfo.name"
            type="text"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input
            v-model="userinfo.pass"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="login">登陆</el-button>
          <el-button type="primary" class="btn" @click="chong">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userinfo: {
        name: "",
        pass: "",
      },
    };
  },
  methods: {
    // 登录
    login() {
      this.$axios
        .post("http://ceshi5.dishait.cn/admin/login", {
          username: this.userinfo.name,
          password: this.userinfo.pass,
        })
        .then((res) => {
          if (res.data.msg == "ok") {
            localStorage.setItem("token", res.data.data.token);
            this.$router.push({ path: "/home" });
            
            // token过期

            // setTimeout(() => {
            //   localStorage.removeItem("token");
            // }, 5000);
            // setTimeout(() => {
            //   alert("token失效请重新登录");
            // }, 10000);
            // setTimeout(() => {
            //   this.$router.push({ path: "/login" });
            // }, 15000);
          }
        })
        .catch((res) => {
          alert("登录失败");
        });
    },
    //重置
    chong() {
      this.userinfo.name = "";
      this.userinfo.pass = "";
    },
  },
};
</script>
<style scoped>
.box {
  width: 1523px;
  height: 700px;
  margin: 0 auto;
  background: lightskyblue;
  padding-top: 1px;
}
.box1 {
  width: 600px;
  height: 350px;
  margin: 0 auto;
  margin-top: 180px;
  background: linen;
}
h1 {
  text-align: center;
  line-height: 100px;
}
.btn {
  width: 70px;
  height: 40px;
}
#q1 {
  width: 400px;
  margin: 0 auto;
  margin-top: -30px;
}
</style>